{{ define "blog/article.html" }}

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="{{author}},博客,技术">
    <meta name="theme-color" content="#3f51b5">
    <meta name="mdx-main-color" content="#3f51b5">
    <title itemprop="name">{{author}} - 加载中...</title>
    <link media="all" href="/static/blog/mdx/css/autoptimize.css" rel="stylesheet" />
    <link rel="canonical" href="{{rootURL}}/article/{{.PostId}}" />
    <link href="/static/logo/favicon32.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="/static/logo/favicon32.ico" rel="mask-icon">
    <link rel="stylesheet" href="/static/blog/3rd/enlighter/enlighterjs.min.css" />

    <style type="text/css" id="wp-custom-css">
        .enlighter-t-monokai {
            color: #fff;
            background-color: #222228 !important;
            font-family: Consolas, "Source Code Pro", "Liberation Mono", "Courier New", Courier, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", monospace !important;
            padding: 8px 0 !important;
            border-radius: 8px !important;
            margin-top: -10px !important;
            margin-bottom: 15px !important;
        }

        .enlighter-t-monokai .enlighter-c1 {
            color: #656565 !important;
        }

        ul li .enlighter-t-monokai {
            margin-top: 0 !important;
        }

        .enlighter-overflow-scroll.enlighter-v-standard::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, .3) !important;
        }

        .enlighter-t-monokai.enlighter-hover div.enlighter>div:hover {
            background-color: #30344a !important;
        }

        .enlighter-t-monokai.enlighter-linenumbers div.enlighter>div::before {
            font-size: 15px !important;
        }

        .enlighter-t-monokai div.enlighter>div.enlighter-special {
            background-color: #343956 !important;
        }

        .enlighter-t-monokai .enlighter-c0 {
            color: #5e6775 !important;
        }

        .wp-block-file {
            margin-bottom: 20px;
        }
    </style>

    {{template "blog/header"}}
</head>

<body class="mdui-theme-primary-indigo mdui-theme-accent-pink body-grey1 mdx-reduce-motion">
    <script type='text/javascript' src='/static/blog/mdx/js/theme_dark_night.js'></script>
    <div class="fullScreen sea-close"></div>
    <div class="mdui-progress mdui-color-white">
        <div class="mdui-progress-indeterminate"></div>
    </div>

    {{template "blog/siderbar" .}}
    <div class="titleBarGobal mdui-appbar mdui-shadow-0 mdui-text-color-white-text" id="SearchBar">
        <form class="mdui-toolbar mdui-appbar-fixed" role="search" method="get" id="searchform" action="/search">
            <div class="outOfSearch mdui-valign">
                <label for="s"><i class="mdui-icon material-icons seaicon">&#xe8b6;</i></label>
                <input class="seainput" type="text" name="txt" id="s" autocomplete="off" placeholder="搜索什么..." value="">
            </div>
            <div class="mdui-toolbar-spacer"></div>
            <a class="mdui-btn mdui-btn-icon sea-close">
                <i class="mdui-icon material-icons">&#xe5cd;</i>
            </a>
        </form>
    </div>

    <div id="articleCover"></div>
    <div class="PostTitleFillBack2 mdui-color-theme"></div>

    <header role="banner">
        <div class="titleBarGobal mdui-appbar mdui-shadow-0  mdui-text-color-white-text" id="titleBarinPost">
            <div class="mdui-toolbar mdui-appbar-fixed"> <button class="mdui-btn mdui-btn-icon" id="menu"
                    mdui-drawer="{target:'#left-drawer',overlay:true,swipe:true}"><i
                        class="mdui-icon material-icons">menu</i></button> <a href="{{rootURL}}"
                    class="mdui-typo-headline">{{author}}</a>
                <div class="mdui-toolbar-spacer"></div> <button class="mdui-btn mdui-btn-icon"
                    mdui-menu="{target: '#qrcode'}" mdui-tooltip="{content: '在其他设备上继续阅读'}" id="oth-div"><i
                        class="mdui-icon material-icons">&#xe326;</i></button>
                <div class="mdui-menu" id="qrcode"></div> <button class="mdui-btn mdui-btn-icon seai"><i
                        class="mdui-icon material-icons">&#xe8b6;</i></button>
            </div>
        </div>
    </header>
    <div class="mdui-text-color-white-text mdui-typo-display-2 mdui-valign PostTitle PostTitle2"
        itemprop="name headline" itemtype="http://schema.org/BlogPosting">
        <span class="mdui-center" id="articleTitle">加载中...</span>
    </div>
    <div class="PostMain PostMain2">
        <input type="hidden" id="hidePostId" value="{{.PostId}}">
        <div class="ArtMain0 mdui-center mdui-shadow-12">
            <article class=" md_render post mdui-typo">
            </article>
            <div class="mdx-post-money">
                <button mdui-menu="{target: '#mdx-qrcode-money',align: 'center'}" mdui-tooltip="{content: '赞赏'}"
                    class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple">
                    <i class="mdui-icon material-icons">&#xe8dc;</i>
                </button>
                <div class="mdui-menu" id="mdx-qrcode-money">
                    <img alt="赞赏" src="/static/comm/image/wechat_pay.png">
                </div>
            </div>

            <!-- 版权说明开始 -->
            <div class="mdui-card mdx-say-after">
                <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128" >
                    <path d="M512 106.7a405.3 405.3 0 110 810.6 405.3 405.3 0 010-810.6zm0 85.3a320 320 0 100 640 320 320 0 000-640zm42.7 277.3V704h-85.4V469.3h85.4zM512 298.7a47 47 0 110 93.8 47 47 0 010-93.8z" />
                </svg>
                <div class="mdui-card-actions mdui-typo">
                    本文链接：<a href="{{rootURL}}/article/{{.PostId}}">{{rootURL}}/article/{{.PostId}}</a><br>
                    本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/deed.zh" target="_blank" rel="noopener">CC BY-NC-SA 3.0 Unported</a> 协议进行许可
                </div>
            </div>
            <!-- 版权说明结束 -->

            <div class="spanout">
                <!-- 分享组件开始-->
                <button class="mdui-fab mdui-fab-mini mdui-color-theme-accent mdui-ripple mdx-share"
                    mdui-menu="{target: '#mdxshare'}">
                    <i class="mdui-icon material-icons">&#xe80d;</i>
                </button>
                <ul class="mdui-menu" id="mdxshare">
                    <li class="mdui-menu-item mdx-s-img-li">
                        <a href="javascript:showSharePic()"> <i
                                class="mdui-icon material-icons mdx-share-icon mdui-menu-item-icon">&#xe3f4;</i>生成分享图</a>
                    </li>
                </ul>
                <!-- 分享按钮结束-->

                <!-- Tag结束 -->
                <div class="mdui-container">
                    <div class="mdui-tags mdui-typo" id="articleTag"> </div>
                </div>
                <!-- Tag结束 -->
            </div>

            <!--- 评论组件开始 --->
            <div id="respond" class="comment-respond">
                <h3 id="reply-title" class="comment-reply-title">发表评论
                    <small>
                        <a rel="nofollow" id="cancel-comment-reply-link" href="/develop/1912.html#respond"
                            style="display:none;">取消回复</a>
                    </small>
                </h3>
                <form id="commentform" class="comment-form">
                    <div class="mdx-comment-main-input mdui-textfield mdui-textfield-floating-label ">
                        <i class="mdui-icon material-icons">textsms</i>
                        <label class="mdui-textfield-label">说点什么...</label>
                        <textarea class="mdui-textfield-input" name="content" id="comment"></textarea>
                    </div>
                    <div class="mdui-textfield mdui-textfield-floating-label disfir disfirleft">
                        <i class="mdui-icon material-icons">account_circle</i>
                        <label class="mdui-textfield-label">昵称</label>
                        <input class="mdui-textfield-input" type="text" id="username" name="username" value="" required>
                        <div class="mdui-textfield-error" role="alert">昵称不能为空</div>
                    </div>
                    <div class="mdui-textfield mdui-textfield-floating-label disfir disfirright">
                        <i class="mdui-icon material-icons">email</i>
                        <label class="mdui-textfield-label">邮箱</label>
                        <input class="mdui-textfield-input" type="email" id="email" name="email" value="" required>
                        <div class="mdui-textfield-error" role="alert">请按格式填写邮箱</div>
                    </div>
                    <div class="mdui-textfield mdui-textfield-floating-label commurl">
                        <i class="mdui-icon material-icons">&#xe157;</i>
                        <label class="mdui-textfield-label">网站（如果有）http(s)://</label>
                        <input class="mdui-textfield-input" type="url" id="url" name="url" value="">
                    </div>
                    <p class="form-submit">
                        <input name="submit" id="submit" class="submit" value="发射" />
                        <input type='hidden' name='postId' id='postId' value='{{.PostId}}' />
                    </p>
                    <p style="display: none;"><input type="hidden" id="akismet_comment_nonce"
                            name="akismet_comment_nonce" value="8c8502e66c" /></p>
                    <p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="15" /></p>
                </form>
            </div>
            <!--- 评论组件结束 --->

            <!--- 评论消息展示开始 --->
            <div class="comms mdui-center" id="comments">
                <ul class="mdui-list ajax-comments">
                </ul>
                <nav id="comments-navi">
                    <button id="more-comment-btn"
                        class="mdx-more-comments mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple"
                        mdui-tooltip="{content: '加载更多评论'}">
                        <i class="mdui-icon material-icons">keyboard_arrow_down</i>
                    </button>
                    <button id="not-more-comment-btn" class="mdui-btn" disabled> 没有更多了 </button>
                </nav>
                <div class="mdx-comments-loading">
                    <div class="mdui-valign">
                        <div>
                            <div class="mdui-spinner"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--- 评论消息展示结束 --->

        </div>

        <!-- 填充环形指示器 -->
        <div id="indic"></div>

        <!-- 填充分享图，用于绘制分享图 -->
        <div class="mdx-share-img" id="mdx-share-img"> </div>

        <button class="mdui-fab mdui-color-theme-accent mdui-fab-fixed mdui-fab-hide scrollToTop mdui-ripple">
            <i class="mdui-icon material-icons">&#xe316;</i>
        </button>
        {{template "blog/footer"}}
    </div>

    <script type='text/javascript' src='/static/blog/mdx/js/jquery.min.js'></script>
    <script type='text/javascript' src='/static/blog/3rd/mdui/js/mdui.min.js'></script>
    <script type='text/javascript' src='/static/blog/mdx/js/search.js'></script>
    <script type='text/javascript' src='/static/blog/3rd/radialIndicator/radialIndicator.min.js'></script>
    <script type='text/javascript' src='/static/blog/3rd/qrcode/qrcode.min.js'></script>
    <script type='text/javascript' src='/static/blog/3rd/html2canvas/html2canvas.min.js'></script>
    <script type='text/javascript' src='/static/blog/mdx/js/toc.js'></script>
    <script type='text/javascript' src='/static/blog/3rd/lazysizes/lazyload.js'></script>
    <script type='text/javascript' src='/static/blog/mdx/js/better_comment.js'></script>
    <script type="text/javascript" src="/static/blog/3rd/enlighter/enlighterjs.min.js"></script>
    <script type='text/javascript' src="/static/blog/3rd/axios/axios.min.js"></script>
    <script type='text/javascript' src="/static/comm/js/dog.js"></script>
    <script type='text/javascript' src='/static/blog/mdx/js/post.js'></script>
    <script type='text/javascript' src='/static/blog/mdx/js/comment.js'></script>
    <script type='text/javascript' src='/static/blog/mdx/js/article.js'></script>
</body>

</html>
{{end}}